<template>
    <view class="g_content">
        <!--        <u-loading-page :loading="loading"></u-loading-page>
                <view v-if="!loading">-->
        <view class="p_t_10">
            <swiper  previous-margin='160rpx' next-margin='160rpx' :current="currentIndex" @change="change">
                <block v-for="(item,index) in list" :key="index" >
                    <swiper-item>
                        <view class="box" :animation="index == currentIndex?animationData:animationData2">
                            <view class="swiper_item p_20 p_b_20">
                                <view class="dis_f_sb_c m_b_40">
                                    <view class="f_s_16">{{item.configName}}</view>
                                    <view class="f_s_14">可发布{{item.sendNum}}条</view>
                                </view>
                                <view class="dis_f_c_c">
                                    可刷新：{{item.refreshNum}}次
                                    <!--                                    <u-button type="warning" shape="circle">活动价：￥{{item.discount}}</u-button>-->
                                </view>
                            </view>
                        </view>
                    </swiper-item>
                </block>
            </swiper>
            <view class="p_20">
                <view class="card_box p_10">
                    <view class="f_s_16 line_title m_b_10">我的会员卡</view>
                    <view v-if="userInfo.vip!=0" class="box" :animation="index == currentIndex?animationData:animationData2">
                        <view class="swiper_item p_20 p_b_20">
                            <view class="dis_f_sb_c m_b_60">
                                <view class="f_s_16">会员卡</view>
                                <view class="f_s_16">剩余{{userInfo.hyNumber}}条</view>
                            </view>
                            <view class="dis_f_c_c">  可刷新：{{userInfo.refreshTimes}}次  </view>
                            <view class="dis_f_c_c m_t_5">  有效期至：{{userInfo.gqTime}}  </view>
                        </view>
                    </view>
                    <view v-else class="dis_f_c_c m_t_10"> 暂无会员卡</view>
                </view>
                <view class="card_box p_10 m_t_20 m_b_50">
                    <view class="f_s_16 line_title m_b_10">会员规则</view>
                    <view class=" hy_title">
                        <rich-text :nodes="vipRules"  space="ensp" catchtap="catchImage"> </rich-text>
                    </view>
                </view>

                <view style="width: 50%;margin: 0 auto" v-if="userInfo.vip==0">
                    <u-button type="primary" shape="circle" color="#68BC2C" @click="handleToVip">￥{{price}}</u-button>
                </view>
            </view>
        </view>
        <!-- 授权弹窗 -->
        <s-auth-modal />
    </view>
</template>
<script>
import { getByKeyApi,topUpApi} from "@/sheep/api/index";
import { mapGetters, mapMutations } from "vuex";
export default {
    name: 'index',
    data() {
        return {
            loading:true,
            price:'',
            list: [],
            vipRules:'',
            currentIndex:1,
            animationData: {},
            animationData2: {},
            topUpForm: {
                payWay: "WX_XCX_PAY",
                amount: "",
                attach: "",
                orderType: "goods",
                desc: "购买会员卡",
            },
        }
    },
    onShow() {
        // this.getPayCost()
        this.getVipList()
        this.getVipRules()
    },
    computed: {

        ...mapGetters(["userInfo"]),
        // 收缩
        stretch() {
            var animation = uni.createAnimation({
                duration: 400,
                timingFunction: 'ease',
            })
            animation.scale(1).step()
            this.animationData =  animation.export()
        },
        // 展开
        shrink(h) {
            var animation2 = uni.createAnimation({
                duration: 400,
                timingFunction: 'ease',
            })
            animation2.scale(0.85).step()
            this.animationData2 =  animation2.export()
        },
    },
    methods: {
        async getVipList() {
            let res = await getByKeyApi("vip");
            //删除掉数组中 sortNo=0的  普通用户
            res.data.splice(res.data.findIndex(item=>item.sortNo==0),1)
            this.list = res.data;
            if(this.list.length>0){
                this.list=this.list.map(item=>{
                    if (item.remark){
                        let list = item.remark.split("-");
                        return {
                            ...item,
                            sendNum: list[0],
                            refreshNum: list[1],
                            configValue: list[2],
                        }
                    }
                })
            }
            this.price = this.list[1].configValue
            this.topUpForm.amount = this.list[1].configValue
            this.topUpForm.attach = this.list[1].businessConfigId
        },
        async getVipRules() {
            let res = await getByKeyApi("vipRules");
            this.vipRules = res.data[0]?.configValue;
            this.vipRules =  this.vipRules.replace(/width="\d+"/g,'width="100%"')
        },
        change(e){
            this.currentIndex = e.detail.current
            this.price = this.list[e.detail.current].configValue
            this.topUpForm.amount = this.list[e.detail.current].configValue
            this.topUpForm.attach = this.list[e.detail.current].businessConfigId
        },
        handleToVip(){
            if (this.userInfo.ifCardReview!=3){
                uni.showModal({
                    content: '您还未实名，请先实名认证',
                    confirmText: '去实名',
                    success: (res) => {
                        if (res.confirm) {
                            uni.navigateTo({
                                url: '/pages/mine/realName',
                            });
                        }
                    },
                })
            }else{
                topUpApi(this.topUpForm).then(({ data }) => {
                    let that = this;
                    uni.requestPayment({
                        provider: "wxpay",
                        timeStamp: data.timeStamp,
                        nonceStr: data.nonceStr,
                        package: data.packageValue,
                        signType: data.signType,
                        paySign: data.paySign,
                        success: function(res) {
                            uni.showToast({
                                title: '支付成功',
                                icon: 'none',
                                duration: 2000
                            })
                            setTimeout(()=>{
                                uni.switchTab({
                                    url: '/pages/mine/index',
                                })
                            },1000)
                        },
                        fail: function(err) {},
                    });
                });
            }
        },

    },
}
</script>

<style scoped lang="scss">
.swiper_item{
    color: #fff;
    background-color: #68BC2C;
    border-radius: 20rpx;
}
.hy_title{
    font-size: 28rpx;
    color: #666666;
    text-indent: 2em;
}
</style>

